<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			canvas {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<canvas id="myCan" width="400px" height="400px">您的浏览器不支持 canvas</canvas>
		<script type="text/javascript">
			var oC = document.getElementById('myCan');
			var ctx = oC.getContext('2d');
			ctx.save();
			ctx.lineWidth = 16;
			//开启路径 
			ctx.beginPath();
			// 指定起点
			ctx.moveTo(50, 50);
			//指定终点
			ctx.lineTo(300, 50);
			// 关闭路径
			ctx.closePath();
			// 连线
			ctx.stroke();

			ctx.lineCap = 'round';
			ctx.beginPath();
			ctx.moveTo(50, 80);
			ctx.lineTo(300, 80);
			// ctx.closePath();
			ctx.stroke();
			ctx.restore();
			// 画三角
			ctx.save();
			ctx.lineWidth = 16;
			ctx.fillStyle = 'palegreen';
			// 设置线段连接点样式
			ctx.lineJoin = 'round';
			ctx.beginPath();
			ctx.moveTo(50, 200);
			ctx.lineTo(300, 200);
			ctx.lineTo(175, 300);
			ctx.closePath();
			ctx.stroke();
			ctx.fill();
			ctx.restore();
			ctx.clearRect(0,0,400,400);
			
			
			ctx.save();
				ctx.beginPath();
				ctx.moveTo(0,200);
				ctx.lineTo(200,100);
				ctx.lineTo(200,200)
				ctx.closePath();
				ctx.stroke()
			ctx.restore();
		</script>
	</body>
</html>
